<%@ page language="java"
	import="java.util.*,com.google.gson.*,com.bidcms.util.*"
	pageEncoding="utf-8"%>
<%

	JsonArray dataJson = (JsonArray)request.getAttribute("components");
 for(JsonElement je : dataJson){
 	JsonObject json = (JsonObject)je;
 	
 	templateUtil tu = new templateUtil();
 	
 %>
	<% if(json.get("type").getAsString().equals("rich_text")){%>
		<!-- 富文本内容区域 -->
		<div class="custom-richtext">
			<%  out.write(json.get("content").getAsString());%>
		</div>
	<% }else if(json.get("type").getAsString().equals("goods")){%>
		<!-- 商品区域 -->
		<% 
			out.write(tu.goods_list(json.get("goods"),json));
		%>
	<% }else if(json.get("type").getAsString().equals("goods_list")){%>
		<% 
			out.write(tu.goods_list(json.get("goods"),json));
		%>
	<% }else if(json.get("type").getAsString().equals("image_ad")){%>
		<!-- 图片广告 -->
		<% if(json.get("show_method").getAsInt()==0){%>
			<div class="custom-image-swiper">
				<div class="swiper-container">
					<div class="swiper-wrapper">

				<%
					JsonArray sub_entry = (JsonArray)json.get("sub_entry");
					for(JsonElement see : sub_entry){
					 	JsonObject se = (JsonObject)see;
				%>
						<div class="swiper-slide">
						<% if(se.get("type").getAsString().equals("image_ad_selection")){%>
						<a href="javascript:void(0);" target="_blank"> <img
							src="<% out.write(se.get("image_url").getAsString());%>" />
						</a>
						<% }%>
					</div>
					<% }%>

				</div>
			</div>
			<div class="swiper-pagination">
				<span class="swiper-pagination-switch swiper-active-switch"></span> <span
					class="swiper-pagination-switch"></span>
			</div>
		</div>
		<% } else if(json.get("show_method").getAsInt()==1){%>
		<ul class="custom-image clearfix">
			<% 
				JsonArray sub_entry = (JsonArray)json.get("sub_entry");
					for(JsonElement see : sub_entry){
					 	JsonObject se = (JsonObject)see;
			%>
			<li class="<% if(null != se.get("size") && se.get("size").getAsInt()==1){%>custom-image-small<% }%>">
				<img class="js-lazy"
				data-src="<% out.write(se.get("image_url").getAsString());%>"
				width="320" height="213" />
			</li>
			<% }%>
		</ul>
		<% }%>
		<% }else if(json.get("type").getAsString().equals("cube2")){%>
		<!--魔方-->
		<table class="custom-cube2-table">
			<tbody>
				<% out.write(json.get("tableContent").getAsString());%>
			</tbody>
		</table>
		<% }else if(json.get("type").getAsString().equals("title")){%>
		<!--标题-->
		<% if(json.get("title_template").getAsInt()==0){%>
		<div>
			<div class="custom-title  text-left">
				<h2 class="title">
					<% out.write(json.get("title").getAsString());%>
				</h2>
				<p class="sub_title">
					<% out.write(json.get("sub_title").getAsString());%>
				</p>
			</div>
		</div>
		<% }else if(json.get("title_template").getAsInt()==1){%>
		<div class="custom-title-noline">
			<div class="custom-title  text-left wx_template">
				<h2 class="title">
					<% out.write(json.get("title").getAsString());%>
				</h2>
				<p class="sub_title">
					<span class="sub_title_date">
						<% out.write(json.get("wx_title_date").getAsString());%>
					</span><span class="sub_title_author">
						<% out.write(json.get("wx_title_author").getAsString());%>
					</span>
					<% if(json.get("wx_title_link_type").getAsInt()==1){%><a
						class="sub_title_link"
						href="<% out.write(json.get("wx_link_url").getAsString());%>">
						<% out.write(json.get("wx_title_link").getAsString());%>
					</a>
					<% }%>
				</p>
			</div>
		</div>
		<% }%>
		<% }else if(json.get("type").getAsString().equals("text_nav")){%>
		<!--文本导航-->
		<ul class="custom-nav clearfix">
			<% 
					JsonArray sub_entry = (JsonArray)json.get("sub_entry");
					for(JsonElement see : sub_entry){
					 	JsonObject se = (JsonObject)see;
				%>
			<% if(se.get("type").getAsString().equals("text_nav_selection")){%>
			<li><a class="clearfix"
				href="<% out.write(se.get("link_url").getAsString());%>" target="_blank"> <span
					class="custom-nav-title">
						<% out.write(se.get("title").getAsString());%>
				</span> <i class="pull-right right-arrow"></i>
			</a></li>
			<% }%>
			<% }%>
		</ul>
		<% }else if(json.get("type").getAsString().equals("nav")){%>
		<!--图片导航-->
		<ul class="custom-nav-4 clearfix">
			<% JsonArray sub_entry = (JsonArray)json.get("sub_entry");
					for(JsonElement see : sub_entry){
					 	JsonObject se = (JsonObject)see;
				%>
			<% if(se.get("type").getAsString().equals("nav_selection")){%>
			<li><a href="<% out.write(se.get("link_url").getAsString());%>"> <img
					class="js-lazy" data-src="<% se.get("image_url").getAsString();%>"
					src="<% out.write(se.get("image_thumb_url").getAsString());%>"
					style="display: inline;"> <span class="title">
						<% out.write(se.get("title").getAsString());%>
				</span>
			</a></li>
			<% }%>
			<% }%>
		
		</ul>
		<% }else if(json.get("type").getAsString().equals("link")){%>
		<ul class="custom-link clearfix">
			<% JsonArray sub_entry = (JsonArray)json.get("sub_entry");
					for(JsonElement see : sub_entry){
					 	JsonObject se = (JsonObject)see;
				%>
			<li><a class="custom-link-link clearfix"
				href="<% out.write(se.get("source_url").getAsString());%>" target="_blank">
					<h3 class="title">
						<% out.write(se.get("source_title").getAsString());%>
					</h3> <i class="pull-right right-arrow"></i>
			</a></li>
			<% }%>
		</ul>
		<% }else if(json.get("type").getAsString().equals("search")){%>
		<!--搜索-->
		<div class="custom-search">
			<form action="http://wap.bidcms.com/v2/showcase/goods/search"
				method="GET">
				<input type="search" class="custom-search-input"
					placeholder="商品搜索：请输入商品关键字" name="q" value=""> <input
					type="hidden" name="bid_id" value="<% out.write((String)request.getAttribute("storeId"));%>">
				<button type="submit" class="custom-search-button">搜索</button>
			</form>
		</div>
		<% }else if(json.get("type").getAsString().equals("showcase")){%>
		<!--橱窗-->
		<div class="custom-showcase-wrap custom-showcase-wrap-0">
			<div class="custom-showcase-wrap-title">
				<% out.write(json.get("title").getAsString());%>
			</div>
		
			<div class="custom-showcase-body">
				<ul class="custom-showcase clearfix">
					<% JsonArray sub_entry = (JsonArray)json.get("sub_entry");
					for(int i =0;i<sub_entry.size();i++){
					 	JsonObject se = (JsonObject)sub_entry.get(i);
				%>
					<li
						class="<% if(i==0 && json.get("mode").getAsInt()==0){%>custom-showcase-big<% }else{%>custom-showcase-small<% }%>">
						<a href="<% out.write(se.get("link_url").getAsString());%>"> <img
							class="js-lazy" data-src="<% se.get("image_url").getAsString();%>"
							src="<% out.write(se.get("image_thumb_url").getAsString());%>"
							style="display: inline;">
					</a>
					</li>
					<% }%>
				</ul>
				<div class="custom-showcase-body-title text-center">
					<% out.write(json.get("body_title").getAsString());%>
				</div>
				<p class="custom-showcase-body-desc text-center">
					<% out.write(json.get("body_desc").getAsString());%>
				</p>
			</div>
		</div>
		<% }else if(json.get("type").getAsString().equals("line")){%>
		<!--辅助线-->
		<div class="custom-line-wrap">
			<hr class="custom-line">
		</div>
		<% }else if(json.get("type").getAsString().equals("white")){%>
		<!--空白-->
		<div class="custom-white"
			style="height: <% out.write(json.get("height").getAsInt()>0?json.get("height").getAsInt():10);%>px;"></div>
		<% }else if(json.get("type").getAsString().equals("tag_list")){%>
		<!--商品标签-->
		<div class="custom-tag-list clearfix">
			<div class="custom-tag-list-menu-block" style="height: 399px;">
				<ul class="custom-tag-list-side-menu" style="position: static;">
					<%  JsonArray sub_entry = (JsonArray)json.get("sub_entry");
						for(int i =0;i<sub_entry.size();i++){
						 	JsonObject se = (JsonObject)sub_entry.get(i);
					 %>
					<li class="<% out.write(i==0?"current":"");%>"><a
						href="#anchor-<% out.write(se.get("timestamp").getAsString());%>-<% out.write(se.get("id").getAsString());%>">
							<span>
								<% out.write(se.get("title").getAsString());%>
						</span>
					</a></li>
					<% }%>
				</ul>
			</div>

			<div class="custom-tag-list-goods">
				<% 
					for(int i =0;i<sub_entry.size();i++){
					 	JsonObject se = (JsonObject)sub_entry.get(i);
				%>
				<p class="custom-tag-list-title"
					id="anchor-<% out.write(se.get("timestamp").getAsString());%>-<% out.write(se.get("id").getAsString());%>">
					<% out.write(se.get("title").getAsString());%>
				</p>
				<ul class="custom-tag-list-goods-list">
					<% 
									JsonArray goods = (JsonArray)se.get("list");
								for(JsonElement goodje : goods){
									JsonObject good = (JsonObject)goodje;
								%>
					<li class="custom-tag-list-single-goods clearfix"><a
						href="http://wap.bidcms.com/v2/showcase/goods?alias=z1etyw0a"
						class="custom-tag-list-goods-img"> <img class="js-lazy"
							data-src="<% out.write(good.get("image_url").getAsString());%>" alt=""
							src="<% out.write(good.get("image_url").getAsString());%>"
							style="display: inline;">
					</a>
						<div class="custom-tag-list-goods-detail">
							<a href="http://wap.bidcms.com/v2/showcase/goods?alias=z1etyw0a"
								class="custom-tag-list-goods-title">
								<% out.write(good.get("title").getAsString());%>
							</a> <span class="custom-tag-list-goods-price">￥<% out.write(good.get("price").getAsString());%></span>
							<a class="custom-tag-list-goods-buy" href="javascript:void(0)"
								data-buyway="1" data-alias="z1etyw0a" data-postage="0"
								data-id="<% out.write(good.get("id").getAsString());%>"> <span
								class="ajax-buy">购买</span> <span class="ajax-loading"></span> <span
								class="ajax-error">请重试</span>
							</a>
						</div></li>
					<% }%>
					</ul>
				<% }%>
			</div>
			</div>
		<% }else if (json.get("type").getAsString().equals("audio")){%>
				<div id="audio" style="margin:auto 0">
					<div class="sidebar-section shop-card">
						<div class="table-cell">
							<img src="<% out.write(json.get("avatar").getAsString());%>" width="60" height="60" class="shop-img" alt="公众号头像">
						</div>
						<div class="table-cell">
							<p class="shop-name"><% out.write(json.get("title").getAsString());%></p>
						</div>
					</div>
					<audio controls="controls" src="<% out.write(json.get("audio").getAsString());%>" style="width:100%">
					  您的浏览器不支持 audio 标签。
					</audio>
				</div>
		<%} %>
	<% }%>